<template>
  <div
    :class="'ee-bubble' + (corner ? ' ee-bubble-corner' + corner : '')"
    :style="
      corner
        ? {
            '--ee-bubble-cornerp1': cornerPosition,
            '--ee-bubble-cornerp2': '-' + cornerPosition,
          }
        : {}
    "
  >
    <slot name="left" :i="this"></slot>
    <div class="main">
      <h2 v-if="title" class="title">
        <slot name="title" :i="this" :title="title">
          {{ title }}
        </slot>
      </h2>
      <div class="content">
        <slot :i="this"></slot>
      </div>
    </div>
    <div v-if="closable" class="close" @click="close">x</div>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "ee-bubble",
  emits: ["onclose"],
  props: {
    /** 标题文字，或者重写slot #title="{ i, title }" */
    title: String,
    /** 右上角是否有关闭按钮 */
    closable: Boolean,
    /** 是否有三角标, 0:没有 / 1234分别对应上右下左(html方向) */
    corner: {},
    /** 三角标的位置，一般是0 ~ 100%，位置顺序从左到右从上到下 */
    cornerPosition: { default: "25%" },
  },
  computed: {
  },
  methods: {
    close() {
      console.log("close");
    },
  },
};
</script>

<style lang="scss">
.ee-bubble {
  --ee-bubble-corner: 0.5em;
  --ee-bubble-bg: #fff;

  width: 20em;
  padding: 1em;
  border-radius: 0.5em;
  border: 1px solid #ebeef5;
  position: absolute;
  background-color: var(--ee-bubble-bg);
  // box-shadow: 0 0.125em 0.75em 0 rgb(0 0 0 / 10%);
  /* 父组件使用drop-shader，会对子组件内的非透明像素增加投影 */
  filter: drop-shadow(0 0.125em 0.75em rgb(0 0 0 / 10%));
  transition: all 0.3s;
  display: flex;

  .main {
    flex: 1;

    .title {
      font-size: 1em;
      margin-bottom: 0.375em;
    }

    .content {
      font-size: 0.875em;
      color: #606266;
      line-height: 1.4;
    }
  }

  .close {
    cursor: pointer;
    color: #909399;
    transform: scaleX(1.2);
  }
}

.ee-bubble-corner1:before,
.ee-bubble-corner2:before,
.ee-bubble-corner3:before,
.ee-bubble-corner4:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  transition: all 0.3s;
  border: var(--ee-bubble-corner) solid transparent;
}
.ee-bubble-corner1:before {
  border-top: var(--ee-bubble-corner) solid var(--ee-bubble-bg);
  transform-origin: top;
  top: 0;
  left: var(--ee-bubble-cornerp1);
  transform: scaleY(-1.5) translateX(var(--ee-bubble-cornerp2));
}
.ee-bubble-corner2:before {
  border-right: var(--ee-bubble-corner) solid var(--ee-bubble-bg);
  transform-origin: right;
  right: 0;
  top: var(--ee-bubble-cornerp1);
  transform: scaleX(-1.5) translateY(var(--ee-bubble-cornerp2));
}
.ee-bubble-corner3:before {
  border-bottom: var(--ee-bubble-corner) solid var(--ee-bubble-bg);
  transform-origin: bottom;
  bottom: 0;
  left: var(--ee-bubble-cornerp1);
  transform: scaleY(-1.5) translateX(var(--ee-bubble-cornerp2));
}
.ee-bubble-corner4:before {
  border-left: var(--ee-bubble-corner) solid var(--ee-bubble-bg);
  transform-origin: left;
  left: 0;
  top: var(--ee-bubble-cornerp1);
  transform: scaleX(-1.5) translateY(var(--ee-bubble-cornerp2));
}
</style>